<template>
  <div class="pointernoevent" style="height: 100%">
    <!-- 绝对布局组件 -->
    <div v-if="setting['abs']">
      <div v-for="item in setting['abs']">
        <component
          v-if="item.componentDetail.show"
          v-show="showhidepannelabs(item.componentDetail.type)"
          :is="item.componentDetail.type"
          :componentDetail="item.componentDetail"
          :style="{
            ...getabspos(item.componentDetail.position),
            pointerEvents: 'auto',
            position: 'absolute',
          }"
        ></component>
      </div>
    </div>
    <!-- 二维元素 -->
    <!-- 背景组件 -->
    <!-- 动态行元素 -->
    <!-- 背景shadow -->
    <BackfroundDiv :backtype="setting.backgroundType" v-if="ifcontainerdiv">
      <div style="display: flex; flex-direction: column; height: 100%">
        <!-- rows -->
        <div
          v-for="eachrow in setting.rows"
          :style="{
            flex: eachrow.flex,
            display: 'flex',
            flexDirection: eachrow.flexDirection,
            height: '100%',
          }"
        >
          <BackfroundDiv :backtype="eachrow.backgroundType">
            <div
              style="
                display: flex;
                flex-direction: row;
                height: 100%;
                width: 100%;
              "
            >
              <!-- topblocks -->
              <div
                :class="['pointernoevent']"
                :style="topblockstyle(eachtopblock)"
                v-for="eachtopblock in eachrow.topblocks"
              >
                <div
                  :style="{
                    display: 'flex',
                    flex: eachmiddleblock.flex,
                    flexDirection: eachmiddleblock.flexDirection,
                  }"
                  v-for="eachmiddleblock in eachtopblock.middleblocks"
                >
                  <!-- 每个小区块block -->
                  <div
                    class
                    v-for="eachblock in eachmiddleblock.blocks"
                    :style="{ flex: eachblock.flex }"
                  >
                    <!-- 判断组件是否隐藏 -->
                    <div
                      v-show="
                        showhidepannel(
                          eachtopblock.name,
                          eachblock.componentDetail.type
                        )
                      "
                      style="height: 100%"
                    >
                      <!-- 边框组件 -->
                      <component
                        :is="eachblock.borderOptions.borderType"
                        v-if="eachblock.borderOptions.borderType"
                        :borderOptions="eachblock.borderOptions"
                        :componentDetail="eachblock.borderOptions"
                      >
                        <!-- 数据展示组件 -->
                        <component
                          :is="eachblock.componentDetail.type"
                          :componentDetail="eachblock.componentDetail"
                          style="pointer-events: auto"
                        ></component>
                      </component>
                    </div>
                    <div
                      v-show="
                        !showhidepannel(
                          eachtopblock.name,
                          eachblock.componentDetail.type
                        )
                      "
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </BackfroundDiv>
        </div>
      </div>
    </BackfroundDiv>

    <!-- api组件 -->
    <component :is="item" v-for="item in apilist"></component>
  </div>
</template>

<script>
// 自动加载
const context = require.context("./", true, /\.json$/);

let settings = {};
context.keys().forEach((k) => {
  let karr = k.split("/");
  let kv = karr[karr.length - 1].split(".")[0];
  let mixin = context(k);
  settings[kv] = mixin;
});

import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "index",
  components: {},
  mixins: [commonmixins],
  watch: {
    "$store.state.daping.showhidearr": {
      handler: function (n, o) {
        // this.
      },
    },
  },

  computed: {
    getabspos() {
      return function (pos) {
        _.forIn(pos, (v, k) => {
          if ((v + "").indexOf("px") == -1) {
            pos[k] = this.getscalepxc(v);
          }
        });
        // console.log(pos);
        return pos;

      };
    },
    //获取api组件列表
    apilist: function () {
      let apicoms_arr = Object.keys(this.comrefer);
      let apicoms = {};
      this.setting.rows.map((each_row) => {
        each_row.topblocks.map((each_topblock) => {
          each_topblock.middleblocks.map((each_middleblock) => {
            each_middleblock.blocks.map((each_block) => {
              each_block.componentDetail.type;
              if (apicoms_arr.indexOf(each_block.componentDetail.type) != -1) {
                this.comrefer[each_block.componentDetail.type].map((item) => {
                  apicoms[item] = 1;
                });
              }
            });
          });
        });
      });
      return Object.keys(apicoms);
    },

    //获取topblock样式
    topblockstyle() {
      let _this = this;
      return function (param) {
        let params = _.cloneDeep(param);
        if (_this.showhidepannel(params.name)) {
          if (params.componentOptions.styleses.margin) {
            let a_m = params.componentOptions.styleses.margin
              .split(" ")
              .map((item) => {
                let each_m = item.split("p");
                each_m[0] = each_m[0] * _this.$root.setting.scale;
                return each_m.join("p");
              });
            // a_m[2] = '0px'
            params.componentOptions.styleses.margin = a_m.join(" ");
            let wh = `calc(100% - ${_this.$root.setting.scale * 40}px)`;
            return {
              flex: params.flex,
              display: "flex",
              flexDirection: params.flexDirection,
              ...params.componentOptions.styleses,
              // height: wh,
              // width: wh,
              height: "100%",
            };
          } else {
            return {
              flex: params.flex,
              display: "flex",
              flexDirection: params.flexDirection,
              height: "100%",
              ...params.componentOptions.styleses,
            };
          }
        } else {
          // if (params.componentOptions.styleses.margin && params.componentOptions.styleses.margin == "10px 10px -10px 10px") {

          //   return {
          //     flex: params.flex,
          //     display: "flex",
          //     flexDirection: params.flexDirection,
          //     height: "100%"
          //   };
          // }else{
          return {
            flex: params.flex,
            display: "flex",
            flexDirection: params.flexDirection,
            height: "100%",
          };
          // }
        }
      };
    },
    // 获取显示隐藏数组
    showhidearr() {
      return this.$store.state.daping.showhidearr;
    },
    //判断绝对布局组件显示隐藏
    showhidepannelabs() {
      return function (type) {
        let tmpshow = true;
        this.$store.state.daping.hidepannel.map((item) => {
          if (this.pannelcom[item].indexOf(type) != -1) {
            tmpshow = false;
          }
        });
        return tmpshow;
      };
    },
    // 获取显示隐藏数组判断结果
    showhidepannel() {
      return function (params, comname) {
        if (!this.setting["pannelcom"]) {
          return true;
        }
        Object.keys(this.setting["pannelcom"]).map((item) => {
          this.pannelcom[item] = this.setting["pannelcom"][item];
        });
        //判断无配置项的
        let allpannelarr = [];
        Object.keys(this.pannelcom).map((item) => {
          allpannelarr = allpannelarr.concat(this.pannelcom[item]);
        });
        //获取列表
        let showarr = [];
        let pannelarr = this.showhidearr;
        pannelarr.map((item) => {
          showarr = showarr.concat(this.pannelcom[item]);
        });
        if (allpannelarr.indexOf(params) == -1) {
          let tmpshow = true;
          this.$store.state.daping.hidepannel.map((item) => {
            if (this.pannelcom[item].indexOf(comname) != -1) {
              tmpshow = false;
            }
          });
          return tmpshow;
        } else {
          //判断组件是否存在列表
          if (showarr.indexOf(params) != -1) {
            return true;
          } else {
            return false;
          }
        }
      };
    },
  },

  data() {
    return {
      //面板与组件对照表
      pannelcom: {
        leftpannel: ["titlerowone", "contentrowone"],
        rightpannel: ["titlerowthree", "contentrowthree"],
      },
      //组件api对照表
      comrefer: {},

      taian: {
        // mianjinumtaian: ['APIqueryDbgongremianjinum'],
      },

      zhengzhou: {
        // gongremianjizzn: ["APIqueryDbgongremianjinum"],
        // zuorishijihaoreliangzzn: ["APIqueryDbzuorishijinum"],
        // shishigongreliangzzn: ["APIqueryDbquanwangshishichart"],
        zonghaoreliangzznn: ["APIqueryDbzonghaoreliangnumzz"],
        cainuantianshuzznn: ["APIBigScreen"],
        datatablereyuanzzn: [
          "APIBigScreen",
          "APIqueryDbHeatplant",
          "APIqueryDbSubstation",
        ],
        datatableguanwangzzn: ["APIqueryDbPipenetzz"],
        chartbarchartzhongyaozzn: ["APIqueryDbMeasuredpoint"],
        datatablewarnzzn: ["APIqueryWarn"],
        jinrijihuareliangzznn: ["APIjinrijihuareliang"],
        chartpiechartgongrezzn: ["APIqueryDbGRLZB"],
        shishigongreliangzznn: ["APIqueryDbGRLZB"],
        chartbarchartbushuizzn: ["APIconnectorListzz", "APIqueryDbConnectorzz"],
        chartlinechartquanwangzz: ["APIqueryDbPipenetColSa_003qczz"],
        chartlinechartgonglv1zzn: ["APImanageHeatPlantzz"],
        chartlinechartgonglv2zzn: ["APImanageHeatPlantzz"],


        commontitleweather:['APIcommontianqishishi'],

      },

      yantai: {


        commontitletime: [""],
        commoncainuantianshuup: ["APIBigScreen"],
        commontitleweather: ["APIcommontianqishishi"],

        commontitlelogotext: [""],

        commonjinrijihuareliang: ["APIjinrijihuareliang"],
        commonshishigongreliang: ["APIqueryDbGRLZB"],
        commonzonghaoreliang: ["APIqueryDbzonghaoreliangnumzz"],


        commondatatablewarn: ['APIqueryWarn'],
        commondatatablereyuan: ["APIBigScreen",
          "APIqueryDbHeatplant",
          "APIqueryDbSubstation",],
        commondatatableguanwang: ['APIqueryDbPipenetzz'],
        commondatatablerelizahn: [''],
        commonguanwanggongremianjihuantu: ['APIqueryDbPipenetzz'],
        commonzhongyaojiancedian: ['APIqueryDbMeasuredpoint'],

        commongonggao: ['APIBigScreen'],
        commongongrejindutiao: [''],

        commontianqi24h: ['APIcommontianqishishi'],
        commontianqi7day: ['APIcommontianqilishi'],
        commongongreliangzhanbi: ['APIqueryDbGRLZB'],
        commonquanwanggongreliang: ['APIqueryDbPipenetColSa_003qczz'],
        commonbushuiliang: ['APIconnectorListzz','APIqueryDbConnectorzz'],
        commonreyuan: [''],

        commonreyuangongrelianglist: ['APImanageHeatPlantzz']



      },

      zhengzhoubanping1: {
        commontitleweather: ["APIcommontianqishishi"],
      },

      ifcontainerdiv: false,
      setting: {},
    };
  },

  created() {
    let setting = settings[this.$store.state.daping.type];
    //判断郑州半屏2是否从本地加载配置
    if (this.$store.state.daping.type == "zhengzhoubanping2") {
      let type = localStorage.getItem("zhengzhoubanping2setting");
      if (type) {
        setting = JSON.parse(localStorage.getItem("zhengzhoubanping2setting"));
      }
    }
    this.setting = setting;

    //设置api组件列表
    if (this[this.$store.state.daping.type]) {
      //设置api组件列表
      this["comrefer"] = this[this.$store.state.daping.type];
      //设置pannel面板列表
    }

    this.$root.setting.scale = setting.scale;
    this.$root.setting.data = setting;
  },

  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //动态渲染左中右
      //动态渲染左侧；获取左侧数据
      this.ifcontainerdiv = true;
    },
  },
};
</script>

<style lang='scss' scoped>
// .wm {
//   width: 50%;
//   margin: 5px;
// }

.pointernoevent {
  pointer-events: none;
}

.topblock {
}

.block {
}

.eachblock {
}

.commonstyle {
}
</style>
